<template>
  <view class="page" :style="themeColor">
   <fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
   	<view slot="content">帮助与反馈</view>
   </fu-custom>
    <!-- <view :style="{ height: 88 + StatusBar + 'rpx' }"></view> -->
    <!---flex布局flex布局开始-->
    <view
      class="flex flex-direction flex-wrap align-stretch benben-flex-layout helpCenter_flex_1"
	  v-if="dataQuestion.length > 0"
    >
      <view class="flex flex-direction flex-wrap align-stretch">
        <view class="flex flex-wrap align-center helpCenter_fd1_0_c0">
          <view class="flex flex-wrap align-center helpCenter_fd1_0_c0_c0"></view>
          <text class="helpCenter_fd1_0_c0_c1">常见问题</text>
        </view>
        <template v-for="(item, key0) in dataQuestion">
          <view
            class="flex flex-wrap align-center justify-between helpCenter_fd1_0_c1"
            @tap.stop="handleJump"
            data-type="navigateTo"
            :data-url="`/pages/index/setting/helpDetail/helpDetail?detail_id=${item.id}`"
            :key="key0"
          >
            <text class="helpCenter_fd1_0_c1_c0">{{ item.title }}</text>
            <text class="cuIcon-right"></text>
          </view>
        </template>
      </view>
    </view>
    <!---flex布局flex布局结束-->
    <!---flex布局flex布局开始-->
    <view
      class="flex flex-direction flex-wrap align-stretch benben-flex-layout helpCenter_flex_2"
	  v-if="dataTransaction.length > 0"
    >
      <view class="flex flex-wrap align-center helpCenter_fd2_0">
        <view class="flex flex-wrap align-center helpCenter_fd2_0_c0"></view>
        <text class="helpCenter_fd2_0_c1">交易问题</text>
      </view>
      <template v-for="(item, key0) in dataTransaction">
        <view
          class="flex flex-wrap align-center justify-between helpCenter_fd2_1"
          @tap.stop="handleJump"
          data-type="navigateTo"
          :data-url="`/pages/index/setting/helpDetail/helpDetail?detail_id=${item.id}`"
          :key="key0"
        >
          <text class="helpCenter_fd2_1_c0">{{ item.title }}</text>
          <text class="cuIcon-right"></text>
        </view>
      </template>
    </view>
	<fu-empty-ui v-if="dataQuestion.length == 0&&dataTransaction.length == 0"></fu-empty-ui>
    <!---flex布局flex布局结束-->
	<view class="btn fu-fs32 flex align-center justify-center margin-lr round" @tap="handleJump" data-url="/pages/index/setting/feedback/index">
		<image src="https://localelife.chunchuangkeji.cn/h5img/images/031.png" class="fu-block-32 margin-right-24"></image>
		<text class="fu-fs28">意见反馈</text>
	</view>
    <view :style="{ height: '100rpx' }"></view>
  </view>
</template>
<script>
import { validate } from '@/common/utils/validate.js';
export default {
  components: {},

  data() {
    return {
      dataQuestion: [],
      dataTransaction: []
    };
  },
  computed: {
    themeColor() {
      return this.$store.getters.themeColor;
    }
  },
  watch: {},
  onLoad(options) {
    this.getgetQuestion();
    this.getgetTransaction();
  },
  onUnload() {},
  onReady() {},
  onShow() {},
  onHide() {},
  onResize() {},
  onPullDownRefresh() {},
  onReachBottom(e) {},
  onPageScroll(e) {},
  methods: {
    //获取常见问题
    async getgetQuestion() {
      //请求方法
      //数据验证

      let dataQuestionData = await this.$api.post(global.apiUrls.post5d648c8d37977, {
        category_id: '25',
        is_recommend: '0',
        type: '2'
      });
      if (dataQuestionData.data.code != 1) {
        this.$message.info(dataQuestionData.data.msg);
        return;
      }
      let dataQuestioninfo = dataQuestionData.data;
      this.dataQuestion = dataQuestioninfo.data.data;
    },
    //获取交易问题
    async getgetTransaction() {
      //请求方法
      //数据验证

      let dataTransactionData = await this.$api.post(global.apiUrls.post5d648c8d37977, {
        category_id: '26',
        is_recommend: '0',
        type: '2'
      });
      if (dataTransactionData.data.code != 1) {
        this.$message.info(dataTransactionData.data.msg);
        return;
      }
      let dataTransactioninfo = dataTransactionData.data;
      this.dataTransaction = dataTransactioninfo.data.data;
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  width: 100vw;
  overflow-x: hidden;
  min-height: calc(100vh - var(--window-bottom));
  background: rgba(246, 247, 249, 1);
  background-size: 100% auto !important;
}

.helpDetail_flex_2 {
  background: #fff;
  background-size: 100% !important;
  width: 750rpx;
  height: 100rpx;
  overflow: hidden;
  z-index: 10;
  bottom: calc(0rpx + var(--window-bottom));
  background-size: 100% auto !important;
}

.helpDetail_fd2_0 {
  width: 32rpx;
  height: 32rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  margin: 0rpx 12rpx 0rpx 0rpx;
}

.helpDetail_fd2_1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #EE3F4D;
  line-height: 45rpx;
}

.helpCenter_flex_0 {
  background: #fff;
  background-size: 100% !important;
  width: 750rpx;
  height: 88rpx;
  overflow: hidden;
  z-index: 10;
  top: 0rpx;
  background-size: 100% auto !important;
}

.helpCenter_fd0_0_c2 {
  padding: 0rpx 0rpx 0rpx 0rpx;
  width: 100rpx;
}

.helpCenter_fd0_0_c1_c0 {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  line-height: 50rpx;
}

.helpCenter_fd0_0_c0_c0 {
  width: 18rpx;
  height: 32rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.helpCenter_fd0_0_c0 {
  width: 100rpx;
}

.helpCenter_fd0_0 {
  padding: 0rpx 32rpx 0rpx 32rpx;
  line-height: 88rpx;
}

.helpCenter_flex_1 {
  background: #fff;
  background-size: 100% !important;
  padding: 0rpx 32rpx 0rpx 32rpx;
  background-size: 100% auto !important;
  // margin: 0rpx 0rpx 20rpx 0rpx;
}

.helpCenter_fd1_0_c1_c1 {
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(191, 191, 191, 1);
}

.helpCenter_fd1_0_c1_c0 {
  line-height: 45rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
}

.helpCenter_fd1_0_c1 {
  border-bottom: 1px solid #eee;
  padding: 32rpx 0rpx 32rpx 0rpx;
}

.helpCenter_fd1_0_c0_c1 {
  line-height: 28rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.helpCenter_fd1_0_c0_c0 {
  background: #FF6F27;
  background-size: 100% !important;
  width: 6rpx;
  height: 28rpx;
  margin: 0rpx 16rpx 0rpx 0rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  background-size: 100% auto !important;
}

.helpCenter_fd1_0_c0 {
  padding: 32rpx 0rpx 8rpx 0rpx;
}

.helpCenter_flex_2 {
  background: #fff;
  background-size: 100% !important;
  background-size: 100% auto !important;
  padding: 0rpx 32rpx 0rpx 32rpx;
}

.helpCenter_fd2_1_c1 {
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(191, 191, 191, 1);
}

.helpCenter_fd2_1_c0 {
  line-height: 45rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #333333;
}

.helpCenter_fd2_1 {
  border-bottom: 1px solid #eee;
  padding: 32rpx 0rpx 32rpx 0rpx;
}
.helpCenter_fd2_1:last-child {
  border-bottom:none;
}
.helpCenter_fd2_0_c1 {
  line-height: 28rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.helpCenter_fd2_0_c0 {
  background: #FF6F27;
  background-size: 100% !important;
  width: 6rpx;
  height: 28rpx;
  margin: 0rpx 16rpx 0rpx 0rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  background-size: 100% auto !important;
}

.helpCenter_fd2_0 {
  padding: 32rpx 0rpx 32rpx 0rpx;
}

.helpCenter_flex_3 {
  background: #fff;
  background-size: 100% !important;
  width: 750rpx;
  height: 320rpx;
  overflow: hidden;
  z-index: 10;
  bottom: calc(0rpx + var(--window-bottom));
  background-size: 100% auto !important;
}


.helpCenter_fd3_0 {
  padding: 40rpx 24rpx 0rpx 24rpx;
}

.btn {
    position: fixed;
	width: 400rpx;
    left: 0;
    right: 0;
    bottom: 56rpx;
	background-color: #fff;
	height: 72rpx;
	border: 1rpx solid #FF6F27;
	margin: 0 auto;
  }
</style>
